<template>
    <div class="container">
        <div class="btns">
            <el-button @click="back">返回</el-button>
            <el-button type="primary" @click="finish">{{ isAdd ? '创建' : '保存' }}</el-button>
        </div>
        <div class="edit_content">
            <div class="item">
                <span class="item-title">
                    <span style="color: red">*</span>
                    标题：</span
                >
                <el-input placeholder="请输入标题" v-model="title" maxlength="50" style="width: 400px"> </el-input>
            </div>
            <span class="desc">50个字符以内。</span>

            <div class="item">
                <span class="item-title">
                    <span style="color: red">*</span>
                    图片：</span
                >
                <el-upload
                    class="avatar-uploader"
                    action="#"
                    :auto-upload="false"
                    :show-file-list="false"
                    :on-change="onchange"
                    :on-exceed="onExceed"
                >
                    <div v-if="imageUrl" class="avatar">
                        <img class="image" :src="imageUrl" @click.stop="" />
                        <div class="hover" @click.stop="">
                            <i class="el-icon-zoom-in" @click="handlePictureCardPreview()"></i>
                            <i class="el-icon-delete" @click="handleRemove()"></i>
                        </div>
                    </div>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </div>
            <div class="item">
                <span class="item-title"> 作者：</span>
                <el-input placeholder="请输入作者" v-model="authorName" maxlength="5" style="width: 400px"> </el-input>
            </div>
            <span class="desc">5个字符以内。</span>
            <div class="item">
                <span class="item-title"> 转自：</span>
                <div>
                    <el-checkbox v-model="checked" style="margin: 4px 0; display: block"></el-checkbox>
                    <el-input :disabled="!checked" placeholder="请输入来源" v-model="from" maxlength="15" style="width: 400px"> </el-input>
                </div>
            </div>
            <span class="desc">15个字符以内。</span>
            <div class="item">
                <span class="item-title">
                    <span style="color: red">*</span>
                    内容：</span
                >
                <rich-text :content="content" @textChange="textChange"></rich-text>
            </div>
        </div>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
    </div>
</template>

<script>
import richText from './richText.vue';
export default {
    props: {
        isAdd: Boolean,
        bannerId: Number,
        editType:Number
    },
    data() {
        return {
            title: '',
            dialogVisible: false,
            dialogImageUrl: '',
            disabled: false,
            imgFile: null,

            content: '',
            editorOption: {
                placeholder: ''
            },
            fileList: [],
            checked: false,
            authorName: '',
            from: '',
            imageUrl: '',
            bannerBelongId:0,
        };
    },
    created() {
        if (this.editType != 0){
            this.getData();
        }
    },
    components: {
        richText
    },
    methods: {
        onchange(file, fileList) {
            console.log('🚀 ~ file: editBanner.vue ~ line 123 ~ onchange ~ file, fileList', file, fileList);
            const isLt200K = file.raw.size / 1024 < 200;
            if (!isLt200K) {
                this.$message.error('上传图片大小不能超过200KB!');
                return;
            }
            this.imageUrl = URL.createObjectURL(file.raw);
            this.imgFile = file.raw;
        },
        handleRemove() {
            this.imageUrl = '';
            this.imgFile = null;
        },
        handlePictureCardPreview() {
            this.dialogImageUrl = this.imageUrl
            this.dialogVisible = true;
        },
        onEditorChange({ editor, html, text }) {
            this.content = html;
        },
        onExceed(files, fileList) {
            this.$message.error('已存在上传图片，请删除后再上传新的图片');
            console.log('🚀 ~ file: editBanner.vue ~ line 132 ~ onExceed ~ files, fileList', files, fileList);
        },
        finish() {
            let config = {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            };
            var formData = new FormData();
            if (!this.title || this.title.length == 0) {
                this.$message.error('请输入标题');
                return;
            }
            if (!this.imageUrl || this.imageUrl.length == 0) {
                this.$message.error('请上传Banner图片');
                return;
            }
            if (!this.content || this.content.length == 0) {
                this.$message.error('请输入内容');
                return;
            }
            formData.append('title', this.title);
            if (this.imgFile) {
                formData.append('barnnerImg', this.imgFile);
            }else{
                formData.append('bannerBelongId', this.bannerBelongId);  
            }
            formData.append('authorName', this.authorName || '');
            if(this.checked){
                formData.append('from', this.from || '');
            }else{
                formData.append('from', '');
            }
            formData.append('content', this.content);
            if (this.editType == 1) {
                formData.append('id', this.bannerId);
            }
            this.$api
                .healthArticleSave(formData, config)
                .then((res) => {
                    this.$emit('save');
                })
                .catch((err) => {});
        },
        getData() {
            let self = this;
            self.$api
                .get({
                    url: '/healthArticle/findById',
                    data: {
                        id: self.bannerId
                    }
                })
                .then((res) => {
                    console.log('🚀 ~ file: editBanner.vue ~ line 156 ~ getData ~ res', res);
                    self.title = res.data.title || '';
                    self.authorName = res.data.authorName || '';
                    self.from = res.data.from || '';
                    self.checked = self.from.length > 0;
                    self.content = res.data.content || '';
                    if (res.data.bannerFile) {
                        self.imageUrl = 'https://uhome.haier.net/acecology/hsadmin/static/' + res.data.bannerFile.path;
                        self.bannerBelongId = res.data.bannerBelongId;
                    }
                })
                .catch((err) => {});
        },
        back() {
            this.$emit('back');
        },
        textChange(e) {
            this.content = e;
        },
        handleClick() {}
    }
};
</script>

<style scoped lang="scss">
.container {
    display: flex;
    flex-direction: column;
    .btns {
        display: flex;
        justify-content: space-between;
    }
    .edit_content {
        display: flex;
        flex-direction: column;
        .item {
            margin-right: 10px;
            // max-width: 500px;
            display: flex;
            // align-items: center;
            margin-top: 20px;
        }
        .desc {
            margin-top: 4px;
            padding-left: 120px;
            font-size: 12px;
            color: cornflowerblue;
        }
        .item-title {
            min-width: 120px;
            text-align: right;
            line-height: 32px;
        }
    }
}
/deep/.elUp {
    display: flex;
    .el-upload--picture-card {
        display: flex;
        width: 80px;
        height: 80px;
        justify-content: center;
        align-items: center;
    }
    .el-upload-list--picture-card .el-upload-list__item {
        width: 80px;
        height: 80px;
    }
}
/deep/.editer {
    .ql-container {
        height: 200px;
    }
}
/deep/.avatar-uploader {
    display: flex;
    .el-upload {
        width: 80px;
        height: 80px;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 80px;
            height: 80px;
            line-height: 80px;
            text-align: center;
        }
        .avatar {
            width: 80px;
            height: 80px;
            .image {
                width: 80px;
                height: 80px;
                display: block;
            }
            .hover{
                display: none;
            }
        }
        .avatar:hover{
            .hover{
                position: absolute;
                background-color: rgba($color: #000000, $alpha: 0.4);
                left: 0;
                top: 0;
                width: 80px;
                height: 80px;
                display: flex;
                align-items: center;
                justify-content: space-around;
                i{
                    font-size: 25px;
                    color: #fff;
                }
            }
        }
    }
    .el-upload:hover {
        border-color: #409eff;
    }
}
</style>
